<template>
    <div class="content-overlay" v-if="isShow">
        <div>{{content}}</div>
        <i class="fa fa-chevron-left" aria-hidden="true" @click="prev"></i>
        <i class="fa fa-chevron-right" aria-hidden="true" @click="next"></i>
        <i class="fa fa-times" aria-hidden="true" @click="close"></i>
    </div>
</template>

<script>
const responseData = {
  items: [
    {
      id: 1,
      content: '我是1内容这里是内容内容内容内容内容内容我是内容',
      date: '2017-2-1'
    },
    {
      id: 2,
      content: '为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 ',
      date: '2017-3-1'
    },
    {
      id: 3,
      content: '我是3内容这里是内容内容内容内容内容内容我是内容',
      date: '2016-8-6'
    },
    {
      id: 4,
      content: '我是4内容这里是内容内容内容内容内容内容我是内容',
      date: '2017-6-4'
    }
  ]
}
export default {
  name: 'msgContent',
  props: ['isShow'],
  data: function () {
    return {
      items: responseData.items,
      index: 0
    }
  },
  computed: {
    content () {
      return this.items[this.index].content
    }
  },
  methods: {
    prev: function () {
      if (this.index > 0) {
        this.index --
      }
    },
    next: function () {
      if (this.index < this.items.length - 1) {
        this.index ++
      }
    },
    close: function () {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.content-overlay {
    width: 100%;
    height: 100%;
    text-align:center;
    z-index: 1000;
    background-color: rgba(0,0,0,0.4);
    overflow: hidden;
    position: absolute;
    top: 1.2rem;
    left: 0;
}
.content-overlay div {
    width: 60%;
    height: 8.5rem;
    background-color: white;
    margin: 1.2rem auto;
    border-radius: 0.24rem;
    box-shadow: 0.07rem 0.07rem 0.07rem rgba(117,117,17,0.3);
    text-align: left;
    padding: 0.47rem 0.35rem;
    font-size: 0.43rem;
}
.content-overlay i {
    width: 0.71rem;
    height: 0.71rem;
    font-size: 0.71rem;
    color: #444444;
    position: absolute;
    
}
.fa-chevron-left {
    left: 1.2rem;
    top: 35%;
}
.fa-chevron-right {
    right: 1.2rem;
    top: 35%;
}
.fa-times {
  top: 0.3rem;
  right: 0.3rem;
}
</style>
